<template>
  <el-cascader
    ref="areaRef"
    v-model="area"
    :props="prop"
    :show-all-levels="false"
    placeholder="请选择所属区域"
    :disabled="disabled"
    :style="{ width: width }"
    :clearable="clearable"
    @change="changeSelect"
    :collapse-tags="false"
  />
</template>

<script setup>
import areaCode from '@/components/pub-area/areaCode.js'
import { gerAreaByCode, getAreaInfo } from '@/api/api'

const emit = defineEmits(['update:defaultArea', 'areaChange'])
const props = defineProps({
  clearable: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '160px'
  },
  //  数据回显数组 ['省份id','市区id',...]
  defaultArea: {
    type: [String, Array, Number, null, undefined],
    default() {
      // 不传
      return [areaCode.defaultProvince]
    }
  },
  initArea: {
    type: [String, Array, Number, null, undefined],
    default() {
      // 不传
      return [areaCode.defaultProvince]
    }
  },
  // 组件可选层级 0.只有省份 1.省、市 2.省、市、区 3.省、市、区、乡镇 4.省、市、区、乡镇、街道
  maxLevel: {
    type: Number,
    default: 4
  },
  // 用来控制前面几层不能选择 0.省份disabled 1.市disabled 2....
  // 如果设置了disabledLevel 必须传正确的defaultArea进来
  disabledLevel: {
    type: [Number, String],
    default: 0
  },
  // 父子强制关联 true:可选任意一级  false:只能选中最后一级
  strictly: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
})
const areaRef = ref(null)
const area = ref(props.defaultArea)
const prop = reactive({
  lazy: true,
  label: 'name',
  multiple: true,
  checkStrictly: true,
  emitPath: false,
  lazyLoad: async (node, resolve) => {
    const { data, level } = node
    if (data && data.children && data.children.length !== 0) {
      return resolve([])
    }
    if (level === 0) {
        // 获取全部省份
        const r = await getArea('000000')
          const targetData = []
          for (const item of r.data) {
            const temp = {
              id: item.id,
              name: item.name,
              value: item.id,
              disabled: calDiasbled(level),
              leaf: level >= props.maxLevel,
              loading: false
            }
       
              targetData.push(temp)
            
          }
          resolve(targetData)
    } else {
      // 根据省ID获取市
      const r = await getArea(data.id)
      const targetData = []
      for (const item of r.data) {
        const temp = {
          id: item.id,
          name: item.name,
          value: item.id,
          disabled: calDiasbled(level),
          leaf: level >= props.maxLevel,
          loading: false
        }
        targetData.push(temp)
      }
      resolve(targetData)
    }
  }
})

watch(
  () => props.defaultArea,
  (newValue, oldValue) => {
    if (newValue.length == 0) {
      area.value = [areaCode.defaultProvince]
      emit('update:defaultArea', area.value)
    } else {
      area.value = newValue
      emit('update:defaultArea', newValue)
    }
  },
  { deep: true }
)

// onMounted(() => {
//   if (props.defaultArea && props.defaultArea.length > 0) {
//     props.defaultArea.forEach(item => {
//       item && area.value.push(item)
//     })
//     console.log(props.defaultArea)
//   }
// })

const calDiasbled = nodeLevel => {
  if (!props.strictly) {
    return false
  }
  // 如果是有层级选择限制的 && nodeLevel< 层级限制的level
  if (props.disabledLevel > 0) {
    if (nodeLevel < props.disabledLevel) {
      return true
    } else {
      return false
    }
  } else {
    return false
  }
}

const changeSelect = val => {
  emit('update:defaultArea', val)
  emit('areaChange', [...val].slice(-1)[0])
}

const getArea = code => {
  return gerAreaByCode(code)
}
</script>
<style lang="scss" scoped></style>
